<template>
	<div>
		<img src="../../static/img/banner3.png" alt="" class="img-responsive pc-bg whole">
		<img src="../../static/img/m-banner3.png" alt="" class="img-responsive m-bg whole" style="width: 100%;">
		<div class="container center sign-form">
			<div class="sign-title">
				<span class="h3">报名信息填写</span>
			</div>
			<form class="form-horizontal">
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">学生姓名：</label>
			    		<i>*</i>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				      <input type="text" class="form-control" id="" placeholder="" v-model="name" @blur="nameV(name)" maxlength="50">
				    </div>
				    <span class="col-xs-12 col-md-4" id="name"></span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">性别：</label>
			    		<i>*</i>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				        <div class="choose">
						   <label class="radio">男<input type="radio" name="radio" value="1" checked v-model="sex" @change="sexChoice(sex)"><i></i></label>
						   <label class="radio">女<input type="radio" value="2" name="radio" v-model="sex" @change="sexChoice(sex)"><i></i></label>
						</div>
				    </div>
				    <span class="col-xs-12 col-md-4"></span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">考生号：</label>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				      <input type="text" class="form-control" id="" placeholder="" v-model="num" maxlength="14">
				    </div>
				    <span class="col-xs-12 col-md-4" id="number">14位考生号，没有可不填</span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">身份证号码：</label>
			    		<i>*</i>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				      <input type="text" class="form-control" id="inputEmail3" v-model="identity" @blur="validate(identity)">
				    </div>
				    <span class="col-xs-12 col-md-4" id="identity">请认真核对你的18位身份证号码</span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">联系电话：</label>
			    		<i>*</i>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				      <input type="text" class="form-control" id="inputEmail3" placeholder="" v-model="tele" @blur="telephone(tele)">
				    </div>
				    <span class="col-xs-12 col-md-4" id="telephone">如是电话号码，请输入区号</span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">联系QQ：</label>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				      <input type="text" class="form-control" id="inputEmail3" placeholder="" v-model="qq">
				    </div>
				    <span class="col-xs-12 col-md-4"></span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">户籍所在地：</label>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				      <input type="text" class="form-control" id="inputEmail3" placeholder="" v-model="house">
				    </div>
				    <span class="col-xs-12 col-md-4"></span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">收通知书住址：</label>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				      <input type="text" class="form-control" id="inputEmail3" placeholder="" v-model="address">
				    </div>
				    <span class="col-xs-12 col-md-4">注：北京、天津、辽宁、吉林、上海、浙江、江西、山东、西藏、青海、宁夏的考生请务必填写详细地址</span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">毕业学校：</label>
			    		<i>*</i>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				      <input type="text" class="form-control" id="inputEmail3" placeholder="" v-model="school" @blur="schoolC(school)">
				    </div>
				    <span class="col-xs-12 col-md-4" id="school"></span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">文理：</label>
			    		<i>*</i>
			    	</div>
				    <div class="col-xs-12 col-md-6">
				        <div class="choose">
						   <label class="radio">文科<input type="radio" name="radio1" value="1" checked v-model="subject"><i></i></label>
						   <label class="radio">理科<input type="radio" value="2" name="radio1" v-model="subject"><i></i></label>
						</div>
				    </div>
				    <span class="col-xs-12 col-md-4"></span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">专业：</label>
			    		<i>*</i>
			    	</div>
				    <div class="col-xs-8 col-md-6">
				        <select class="form-control" v-model="major" >
						  <option value="0">请选择专业</option>
						  <option value="3">会计专业</option>
						  <option value="4">艺术设计专业</option>
						  <option value="5">室内设计专业</option>
						  <option value="6">软件技术专业</option>
						  <option value="7">计算机网络技术专业</option>
						</select>
				    </div>
				    <span class="col-xs-12 col-md-4"></span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-12 col-md-2">
			    		<label for="inputEmail3" class="control-label">验证码：</label>
			    		<i>*</i>
			    	</div>
				    <div class="col-xs-12 col-md-6 yanzheng">
						<input type="text" class="form-control" v-model="code" placeholder="请输入验证码" @blur="yanzheng(code)" />
				        <div id="v_container" ></div>
				    </div>
				    <span class="col-xs-12 col-md-4">看不清  点击图片换一张</span>
			    </div>
			    <div class="form-group">
			    	<div class="col-xs-2 ">
			    	</div>
				    <div class="col-xs-12 col-md-6">
				    	<p>注：带 <i class="tip">*</i>号为必填项，填写完毕后请按“提交”按钮</p>
				    </div>
				    <span class="col-xs-4"></span>
			    </div>
			    <div class="form-group">
			    	<div class="col-md-2 col-xs-3">
			    	</div>
				    <div class="col-xs-6">
				    	<button type="button" class="btn" id="btn" @click="submitForm($event)">提交</button>
				    </div>
				    <span class="col-xs-4"></span>
			    </div>
			</form>
			
		</div>
	</div>
</template>


<script>
	import '../assets/js/gVerify.js'
	var verifyCode;
	export default {
		data(){
			return{
				name:'',
				identity:'',
				sex:'',
				tele:'',
				school:'',
				subject:'',
				major:'',
				code:'',
				//选填
				num:'',
				qq:'',
				house:'',
				address:''
			}
		},
		created:function(){
			document.title = "在线报名_扬州中瑞酒店职业学院互联网学院招生网";
			
		},
		mounted(){
			verifyCode = new GVerify("v_container");
		},
		methods:{
			yanzheng(c){
				var res = verifyCode.validate(c);
	            if(res){
	                document.getElementById('btn').disabled=false; 
	                return res;
	            }else{
	                alert("验证码错误");
	                verifyCode.refresh();
	                document.getElementById('btn').setAttribute('disabled','disabled');
	                return res;
	            }
			},
			validate(str){
		       	var reg= /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
		       	if(str.length == 0){
	    			document.getElementById('identity').innerHTML = "请输入身份证号码！！";
	    			document.getElementById('btn').setAttribute('disabled','disabled');
	    		}
				if(reg.test(str) === false) { 
					document.getElementById('identity').innerHTML = "请输入合法身份证！！";
					document.getElementById('btn').setAttribute('disabled','disabled');
		       	}else{
		       		document.getElementById('identity').innerHTML = "";
		       		document.getElementById('btn').disabled=false; 
		       	}
	    	},
	    	telephone(str){
		       	var reg = /^1\d{10}$/;
		       	var reg1 = /^0\d{2,3}-?\d{7,8}$/;
		       	if(str.length == 0){
	    			document.getElementById('telephone').innerHTML = "请输入联系号码！！";
	    			document.getElementById('btn').setAttribute('disabled','disabled');
	    		}
				if(reg.test(str) === false && reg1.test(str)===false) { 
					document.getElementById('telephone').innerHTML = "请输入合法联系号码！！";
					document.getElementById('btn').setAttribute('disabled','disabled');
		       	}else{
		       		document.getElementById('telephone').innerHTML = "";
		       		document.getElementById('btn').disabled=false; 
		       	}
	    	},
	    	sexChoice(str){
	    		this.sex = str;
	    	},
	    	nameV(str){
	    		if(str.length == 0){
	    			document.getElementById('name').innerHTML = "请输入姓名！！";
	    			document.getElementById('btn').setAttribute('disabled','disabled');
	    		}else{
	    			document.getElementById('name').innerHTML = "";
	    			document.getElementById('btn').disabled=false; 
	    		}
	    	},
	    	schoolC(str){
	    		if(str.length == 0){
	    			document.getElementById('school').innerHTML = "请输入毕业学校！！";
	    			document.getElementById('btn').setAttribute('disabled','disabled');
	    		}else{
	    			document.getElementById('name').innerHTML = "";
	    			document.getElementById('btn').disabled=false; 
	    		}
	    	},
	    	submitForm(event){
	    		event.preventDefault();
	            var data = new Object();
	            if(this.name.length == 0){
	            	alert("请输入姓名！！");
	            	return false;
	            }
	            if(this.sex.length == 0){
	            	alert("请选择性别！！");
	            	return false;
	            }
	            if(this.identity.length == 0){
	            	alert("请输入身份证！！");
	            	return false;
	            }
	            if(this.tele.length == 0){
	            	alert("请输入联系号码！！");
	            	return false;
	            }
	            if(this.school.length == 0){
	            	alert("请输入毕业学校！！");
	            	return false;
	            }
	            if(this.subject.length == 0){
	            	alert("请选择文理科！！");
	            	return false;
	            }
	            if(this.major.length == 0){
	            	alert("请选择专业！！");
	            	return false;
	            }
	            if(this.code.length == 0){
	            	alert("请输入验证码！！");
	            	return false;
	            }
	            if(this.num.length !=0 && this.num.length != 14){
	            	alert("请输入14位考生号！！");
	            	return false;
	            }
	            verifyCode.validate(this.code);
            	console.log(this.name,this.sex,this.identity,this.tele,this.school,this.subject,this.major,this.qq,this.house,this.address);
            	this.$http.post('http://hh.c1903.com/index/api/addreginfo',{token:'xueyuanyi',code:'1a11c6a0e49a916429c1719fa8d587e2','name':this.name,'sex':this.sex,'exanum':this.num,'idnum':this.identity,'phone':this.tele,'finishschool':this.school,
	            'branch':this.subject,'major':this.major,'qq':this.qq,'registry':this.house,'address':this.address}).then((res)=>{
			　　		alert("报名成功");
            	}).catch((err)=>{
			　　　　console.log(err);
			　　});
	            
	    	}
		}
	}
</script>

<style>
</style>